<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>load</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="iscroll-probe.js" charset="utf-8"></script>
    <style media="screen">
        .parent {width:300px; height:400px; border:1px solid black; margin:50px auto 0; overflow:hidden; position:relative;}
        .parent .child {width:300px; background:#FFF; position:relative; z-index: 999; overflow:hidden;}
        .parent .dropdown {position:absolute; left: 0; top: 0; width:100%; text-align:center; line-height: 40px;}
        .parent .loadmore {position:absolute; left: 0; bottom: 0; width:100%; text-align:center; line-height: 40px;}
    </style>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="  crossorigin="anonymous"></script>
</head>
<script>
    window,onload = function(){
        let scroll = new IScroll('.parent',{
            disableMouse: true,
            disableTouch : false,
            disablePointer : true,
            preventDefault : false,
            scrollY : true,
            probeType : 3
        });

        let dropdown = document.getElementsByClassName('dropdown')[0];
        let loadmore = document.getElementsByClassName('loadmore')[0];
        let parent = document.getElementsByClassName('parent')[0];
        let child = document.getElementsByClassName('child')[0];

        scroll.on('scroll',ev=>{
            if(scroll.y > 50){
                dropdown.innerHTML = '松手刷新';
            }else{
                dropdown.innerHTML = '下拉刷新';
            }
            
            if(-scroll.y-(child.offsetHeight-parent.offsetHeight)>=50){
                loadmore.innerHTML = '松手加载';
            }else{
                loadmore.innerHTML = '加载更多';
            }
        });

        parent.addEventListener('touchend',function(){
            if(scroll.y >= 50){
                scroll.disable();
                
                child.style.transition = '0.6s all ease';
                child.style.transform = `translateY(${dropdown.offsetHeight}px)`;

                dropdown.innerHTML = '<img height="20" src="loading.gif"/>';

                // setTimeout(() => {
                    $.ajax({
                        url :'1.txt',
                        success (data){
                            child.innerHTML = data;
                            child.style.transition = 'translateY(0px)';
                            dropdown.innerHTML = '下拉刷新';
                            function transEnd(){
                                console.log(111111111111111);

                                child.style.transition = 'none';
                                scroll.y = 0;
                                scroll.enable();
                                scroll.scrollTo(0,0);

                                child.removeEventListener('transitionend',transEnd,false);
                            }
                            child.addEventListener('transitionend',transEnd,false);

                        },error (data){
                            alert('加载失败');
                        }
                    });
                // }, 2000);
                
            }
        });

    }
</script>
<body>
    <div class="parent">
        <div class="child">
          <p>2018年3月8日，鲁检君跟随山东省人民检察院公诉二处检察官程才和汤宁，前往“德州大学生遇害案”二审上诉庭审的现场，为您还原案件真相，揭秘背后的故事。</p>
          <p>案发</p>
  
          <p>2016年10月25日晚，德州市民的朋友圈里疯传着一段视频，视频显示，在一片混乱中，两名年轻男子浑身是血、不省人事，被先后抬上救护车。据当时网友爆料，这是发生在德州某高校商业街的一起伤人事件，受伤的是两名20岁左右的大二学生，送医后经抢救无效死亡。</p>
  
          <p>大学城内？年轻男子？杀人事件？这些敏感的关键词挑动着人们的神经。一时间，学生、老师、家长人心惶惶，各种揣测四起。而找到犯罪嫌疑人，是突破案件的关键。</p>
  
          <p>根据当时一位目击者捡到的一部遗落在现场的手机，警方很快锁定了犯罪嫌疑人费某亮。当晚23时许，在德州市人民医院住院部一部，犯罪嫌疑人费某亮被公安机关抓获。很快，费某亮因涉嫌犯故意杀人罪被批准逮捕。</p>
  
          <p>次年3月6日，德州市人民检察院以费某亮涉嫌故意杀人罪向德州市中级人民法院提起公诉。6月22日，德州市中级人民法院作出刑事判决书，被告人费某亮犯故意杀人罪，判处死刑，剥夺政治权利终身。费某亮不服，提出上诉。</p>
  
          <p>山东省检察院公诉二处的两名检察官程才和汤宁就是在此时接手此案。虽然相较其他恶性案件，本案的案情并不复杂，但青春少年，本该是人生最得意的阶段，2名20岁出头的小伙子却落得如此结果，给家人留下了无法承受的伤痛，实在让人深感痛心和惋惜。</p>
        </div>
        <div class="dropdown">下拉刷新</div>
        <div class="loadmore">加载更多</div>
      </div>
</body>
</html>